import React, { useState } from 'react';
import { History, Award, ChevronRight, BookX, Book } from 'lucide-react';
import { Quiz, MistakeNotebook } from '../../types';

interface QuizListSidebarProps {
  quizHistory: Quiz[];
  mistakeNotebooks: MistakeNotebook[];
  currentQuiz: Quiz | null;
  currentNotebookId?: string;
  view: string;
  onLoadQuiz: (quiz: Quiz) => void;
  onViewResult: (e: React.MouseEvent, quiz: Quiz) => void;
  onLoadNotebook: (notebook: MistakeNotebook) => void;
}

export const QuizListSidebar: React.FC<QuizListSidebarProps> = ({
  quizHistory,
  mistakeNotebooks,
  currentQuiz,
  currentNotebookId,
  view,
  onLoadQuiz,
  onViewResult,
  onLoadNotebook
}) => {
  const [activeTab, setActiveTab] = useState<'history' | 'mistakes'>('history');

  // Sync active tab with view
  React.useEffect(() => {
    if (view === 'MISTAKE_NOTEBOOK') {
      setActiveTab('mistakes');
    } else if (['EXAM_PREVIEW', 'EXAM_RUNNING', 'RESULT', 'REVIEW'].includes(view)) {
      setActiveTab('history');
    }
  }, [view]);

  return (
    <div className="space-y-4">
      <div className="flex p-1 bg-slate-100 rounded-lg mb-4 sticky top-0 z-10">
        <button
          onClick={() => setActiveTab('history')}
          className={`flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-medium rounded-md transition-all ${
            activeTab === 'history'
              ? 'bg-white text-primary shadow-sm'
              : 'text-slate-500 hover:text-slate-700'
          }`}
        >
          <History className="w-3.5 h-3.5" />
          试卷
        </button>
        <button
          onClick={() => setActiveTab('mistakes')}
          className={`flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-medium rounded-md transition-all ${
            activeTab === 'mistakes'
              ? 'bg-white text-primary shadow-sm'
              : 'text-slate-500 hover:text-slate-700'
          }`}
        >
          <BookX className="w-3.5 h-3.5" />
          题集
        </button>
      </div>

      {activeTab === 'history' ? (
        <div className="space-y-3">
          {quizHistory.length === 0 && (
            <div className="text-center py-8 text-slate-400">
              <p className="text-sm italic">暂无记录</p>
              <p className="text-xs mt-1">快去生成试卷吧</p>
            </div>
          )}
          {quizHistory.map(q => {
            const hasResult = !!q.latestResult;
            return (
              <div
                key={q.id}
                onClick={() => onLoadQuiz(q)}
                className={`p-3 border rounded-xl cursor-pointer transition-all group relative ${
                  currentQuiz?.id === q.id && view !== 'HOME' && view !== 'MISTAKE_NOTEBOOK'
                    ? 'bg-indigo-50 border-primary/30 shadow-sm'
                    : 'bg-slate-50 border-slate-100 hover:border-primary/30 hover:shadow-sm'
                }`}
              >
                <h4
                  className={`font-medium text-sm line-clamp-2 pr-6 ${
                    currentQuiz?.id === q.id && view !== 'HOME' && view !== 'MISTAKE_NOTEBOOK'
                      ? 'text-primary'
                      : 'text-slate-700 group-hover:text-primary'
                  }`}
                >
                  {q.title}
                </h4>
                <div className="flex items-center justify-between mt-2">
                  <p className="text-xs text-slate-400">
                    {new Date(q.createdAt).toLocaleDateString()}
                  </p>
                  {hasResult && (
                    <div
                      onClick={(e) => onViewResult(e, q)}
                      className="flex items-center gap-1 text-xs bg-white px-2 py-0.5 rounded-full border border-slate-200 text-slate-500 hover:text-primary hover:border-primary transition-colors shadow-sm"
                      title="查看上次成绩"
                    >
                      <Award className="w-3 h-3 text-amber-500" />
                      <span className="font-bold">{q.latestResult?.score}分</span>
                      <ChevronRight className="w-3 h-3 opacity-50" />
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      ) : (
        <div className="space-y-3">
          {mistakeNotebooks.length === 0 && (
            <div className="text-center py-8 text-slate-400">
              <p className="text-sm italic">暂无题集</p>
              <p className="text-xs mt-1">在考完的试卷中，添加题目</p>
            </div>
          )}
          {mistakeNotebooks.map(notebook => (
            <div
              key={notebook.id}
              onClick={() => onLoadNotebook(notebook)}
              className={`p-3 border rounded-xl cursor-pointer transition-all group relative ${
                currentNotebookId === notebook.id && view === 'MISTAKE_NOTEBOOK'
                  ? 'bg-indigo-50 border-primary/30 shadow-sm'
                  : 'bg-slate-50 border-slate-100 hover:border-primary/30 hover:shadow-sm'
              }`}
            >
              <div className="flex items-start gap-3">
                <div className={`p-2 rounded-lg ${
                  currentNotebookId === notebook.id && view === 'MISTAKE_NOTEBOOK'
                    ? 'bg-white text-primary'
                    : 'bg-white text-slate-400 group-hover:text-primary'
                }`}>
                  <Book className="w-5 h-5" />
                </div>
                <div className="flex-1 min-w-0">
                  <h4
                    className={`font-medium text-sm truncate ${
                      currentNotebookId === notebook.id && view === 'MISTAKE_NOTEBOOK'
                        ? 'text-primary'
                        : 'text-slate-700 group-hover:text-primary'
                    }`}
                  >
                    {notebook.name}
                  </h4>
                  <p className="text-xs text-slate-400 mt-1">
                    共 {notebook.questions.length} 道题目
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};